<template>
	<view class="">
		<input type="text" v-model="person.name"/>
	</view>
	{{person}}
</template>

<script setup>
import { ref, watch } from 'vue'

const person = ref({
	name: "张三",
	age: 23
})

// 监听person
// 此时watch是浅层监听，监听不到person的name属性改变
watch(person, (newValue, oldValue) => {
	console.log("newValue1", newValue)
	console.log("oldValue1", oldValue)
})
// 深度监听，监听到对象的属性发生变化
// watch(() => person.value.name, (newValue, oldValue) => {
// 	console.log("newValue2", newValue)
// 	console.log("oldValue2", oldValue)
// })

// watch默认不会立执行，只有当监听属性发生变化时才会执行，此时可以设置immediate让watch立即执行一次
watch(person, (newValue, oldValue) => {
	console.log("newValue3", newValue)
	console.log("oldValue3", oldValue)
}, {deep:true, immediate: true})


</script>

<style scoped lang="scss">
	       
</style>
